البرمجة

دليل تعلم HTML و CSS

اخر تحديث 09/06/2025
15 تمت قراءة 4 دقيقة

HTML/CSS 101: الدليل الشامل للمبتدئين لتعلم أساسيات تصميم وتطوير الويب

في عالم التقنية الحديث، يعد تطوير وتصميم المواقع الإلكترونية من المهارات الأساسية التي يحرص الكثيرون على تعلمها، سواء لأغراض مهنية أو شخصية. من بين أهم وأبسط الأدوات التي يمكن لأي مبتدئ الاعتماد عليها هي لغتا HTML و CSS، حيث تشكلان العمود الفقري لأي صفحة ويب. هذا المقال يقدم شرحاً موسعاً ومفصلاً حول هاتين اللغتين، ويغطي المفاهيم الأساسية، كيفية الاستخدام، والتقنيات التي تجعل تصميم المواقع جذاباً وفعّالاً.

تعريف HTML و CSS وأهميتهما

ما هي HTML؟

HTML، اختصار لـ HyperText Markup Language، هي لغة ترميز تُستخدم لبناء هيكل صفحات الويب. تقوم هذه اللغة بتحديد المحتوى وتنظيمه، مثل النصوص، الصور، الروابط، الجداول، والفيديوهات. يمكن اعتبارها الهيكل العظمي لأي موقع ويب.

مواضيع ذات صلة

تعمل HTML من خلال مجموعة من العناصر (Tags) التي تعطي المتصفح تعليمات حول كيفية عرض المحتوى. هذه العناصر تشمل عناوين، فقرات، قوائم، جداول، صور، وروابط، وغيرها.

ما هي CSS؟

CSS، اختصار لـ Cascading Style Sheets، هي لغة تنسيق تُستخدم لإضافة الألوان، الخطوط، التخطيطات، والأنماط الأخرى لعناصر HTML. إذا كانت HTML تمثل الهيكل، فإن CSS تمثل المظهر الجمالي للموقع.

تسمح CSS بفصل محتوى الصفحة (HTML) عن التصميم والمظهر، مما يسهل تعديل الشكل العام للموقع بشكل مستقل دون الحاجة لتغيير المحتوى.

تاريخ اللغتين ودورهما في تطوير الويب

بدأت لغة HTML في أوائل التسعينيات مع ظهور الإنترنت كأداة لنشر المحتوى. كانت النسخة الأولى بسيطة جداً، تقتصر على تنظيم النصوص والروابط. مع تطور الويب، توسعت لغة HTML لتدعم الوسائط المتعددة والعناصر التفاعلية.

ظهرت CSS في منتصف التسعينيات لتحل مشكلة عدم وجود مرونة في تصميم صفحات الويب. قبل CSS، كان المطورون يضطرون لاستخدام جداول HTML لتنسيق الصفحات، مما أدى إلى كود معقد وصعب الصيانة.

اليوم، تستخدم HTML و CSS معاً لتطوير مواقع عصرية وسريعة الاستجابة تعمل على مختلف الأجهزة.

بنية ملف HTML الأساسي

لفهم كيفية عمل HTML، يجب التعرف على البنية الأساسية لأي ملف HTML. يبدأ ملف HTML بعنصر الذي يحتوي على قسمين رئيسيين:

  1. قسم الرأس : يحتوي على معلومات تعريفية عن الصفحة مثل العنوان، الترميز، وصلات إلى ملفات CSS أو جافاسكريبت.

  2. قسم الجسم : يحتوي على المحتوى المرئي للزائر مثل النصوص، الصور، القوائم، الجداول.

مثال على هيكل ملف HTML بسيط:

html
html>
<html lang="ar">
<head>
  <meta charset="UTF-8" />
  <title>صفحة HTML بسيطةtitle>
head>
<body>
  <h1>مرحبا بالعالمh1>
  <p>هذا مثال على صفحة HTML بسيطة.p>
body>
html>

العناصر الأساسية في HTML

العناوين (Headings)

تستخدم عناوين HTML لتنظيم المحتوى وتقسيمه إلى أجزاء واضحة، وتتوفر من

إلى

حيث يمثل

العنوان الأهم.

html
<h1>عنوان رئيسيh1>
<h2>عنوان فرعيh2>

الفقرات (Paragraphs)

لإضافة نصوص، تستخدم الفقرة

.

html
<p>هذه فقرة نصية توضح كيفية استخدام HTML.p>

الروابط (Links)

تعتمد الروابط على الوسم مع خاصية href التي تحدد وجهة الرابط.

html
<a href="https://www.example.com">زيارة الموقعa>

الصور (Images)

لإدراج صورة، يستخدم الوسم مع خاصيتي src (رابط الصورة) و alt (وصف بديل).

html
<img src="image.jpg" alt="وصف الصورة" />

القوائم (Lists)

يمكن إنشاء قوائم مرتبة

    أو غير مرتبة

      تحتوي على عناصر

    • .

      html
      <ul>
  <li>البند الأولli>
  <li>البند الثانيli>
ul>

      الجداول (Tables)

      تعرض الجداول باستخدام عناصر

      ,

      (صف),

      (خلية), و

      		(عنوان الخلية).

      لغة CSS: كيف تضيف الجمال والوظائف

      تعتمد CSS على قواعد تتألف من محدد (Selector) وتعريفات (Declarations) تحدد خصائص التنسيق. يمكن ربط CSS بملف HTML بطرق متعددة:

      • داخل ملف HTML مباشرة (Inline): باستخدام خاصية style في الوسم نفسه.

      • داخل قسم : باستخدام وسم